<template>
	<view>
		<uni-list>
			<!-- title、note设置标题和小文字 -->
			<uni-list-item clickable class="uni-list-item" direction="row" v-for="item in listData" :key="item.id"
				:title="item.rankName" @tap="gotolist(item.type)">

				<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
				<template v-slot:header>
					<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
					<image class="image-1item" v-bind:src="item.picUrl" mode="aspectFill"
						onerror="this.src='/static/no-cover.png'"></image>
				</template>
			</uni-list-item>

		</uni-list>
		<page-tabpars></page-tabpars>
	</view>
</template>

<script>
	// 引用
	import mockData from './mock.json';
	export default {
		data() {
			return {
				listData: []
			}
		},
		created() {
			let result = mockData.rows;
			this.listData = result;
		},
		methods: {
			gotolist(type) {
				let addr = "/book/listRank/" + type;
				uni.navigateTo({
					url: '/pages/book/booklist/booklist?add=' + addr
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image-1item {
		flex-shrink: 0;
		margin-right: 10px;
		width: 50px;
		height: 75px;
		border-radius: 6px;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
	}
</style>
